@import url('@src/total.less');
.page-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;

  padding: 0 24px;

  color: #1f2229;
}
.link {
  font-size: @font-size-base;

  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;

  width: 180px;
  height: 40px;
  padding-left: 24px;

  color: @heading-color;
  &:hover {
    font-weight: bold;

    color: @primary-color;
  }
  &::before {
    display: inline-block;

    width: 16px;
    height: 16px;
    margin-right: 24px;

    content: '';
  }
  &.active {
    font-weight: bold;

    color: @primary-color;
  }
  &:nth-child(2) {
    &::before {
      background: url('~@src/assets/imgs/pay_icon1_un.png') no-repeat center;
      background-size: 100% 100%;
    }
    &:hover::before {
      background: url('~@src/assets/imgs/pay_icon1_on.png') no-repeat center;
      background-size: 100% 100%;
    }
    &.active::before {
      background: url('~@src/assets/imgs/pay_icon1_on.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
  &:nth-child(3) {
    &::before {
      background: url('~@src/assets/imgs/pay_icon2_un.png') no-repeat center;
      background-size: 100% 100%;
    }
    &:hover::before {
      background: url('~@src/assets/imgs/pay_icon2_on.png') no-repeat center;
      background-size: 100% 100%;
    }
    &.active::before {
      background: url('~@src/assets/imgs/pay_icon2_on.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
  &:nth-child(4) {
    &::before {
      background: url('~@src/assets/imgs/pay_icon3_un.png') no-repeat center;
      background-size: 100% 100%;
    }
    &:hover::before {
      background: url('~@src/assets/imgs/pay_icon3_on.png') no-repeat center;
      background-size: 100% 100%;
    }
    &.active::before {
      background: url('~@src/assets/imgs/pay_icon3_on.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
}
